<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>simple</title>
    </head>
    <body>
        <div class="father">
            <div class="son"></div>
            <!-- <div class="son"></div>
            <div class="son"></div> -->
        </div>
        <div class="parent">
            <div class="child c1"></div>
            <div class="child c2"></div>
            <div class="child c3"></div>
        </div>
        <style>
            .parent{
                width: 300px;
                height: 200px;
                background-color: cadetblue;
                display: flex;
                /* 确定主轴线方向 */
                flex-direction: row;
                /* 主轴线方向移动子元素 */
                justify-content: space-between;
                /* 交叉轴方向移动子元素 */
                align-items: center;

            }
            .child{
                border: solid 2px red;
                width: 40px;
                height: 40px;
            }
            .c1{
                background-color: blueviolet;
                /* align-self: self-start; */
                /* flex-grow: ;
                flex-shrink: ;
                flex-basis: ;
                flex: 0 1 auto */
                /* flex-grow: 0; */
                flex: 0

            }
            .c2{
                background-color: #223344;
                flex-grow: 0;
                /* flex: 1; */
                flex-shrink: 1;
            }
            .c3{
                background-color: beige;
                flex-grow: 0;
                /* align-self: end; */
                flex-shrink: 1;
            }

            .father{
                width: 400px;
                height: 300px;
                background-color: burlywood;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .son{
                width: 50px;
                height: 50px;
                background-color: blueviolet;
            }

        </style>
    </body>
</html>